<template>
  <div class="container">
    <h1 class="topTitle">Leaflet 北京市路网平面地图(高德)</h1>
    <div class="mapTest" :style="mapWindowStyle">
      <div id="map5"></div>
    </div>
  </div>
</template>

<script>
import * as L from 'leaflet'

export default {
  name: 'Page5',
  components: {
  },
  data() {
    return {
      map5: null,
      url: "",
      attr: "",
      mapWindowStyle: {
        height: '0px'
      }
    }
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 120) + 'px';
    },
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {
    // XYZ 切片形式的地图 URL 地址
    this.url = "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
    this.attr = '高德地图（©2021 高德软件 GS(2019)6379号 - 甲测资字11002004 - 京ICP证 070711号）';

    let map5 = L.map("map5", {
      minZoom: 3,
      maxZoom: 18,
      center: [39.92, 116.46],
      zoom: 9,
      zoomControl: false,
      //attributionControl: false,
      crs: L.CRS.EPSG3857
    });
    const opt = {
      attribution: this.attr,
    }
    L.tileLayer(this.url, opt).addTo(map5);
    this.map5 = map5;
  }
}
</script>

<style lang="stylus" scoped>
@import 'leaflet/dist/leaflet.css'
@import "leaflet-draw/dist/leaflet.draw.css"

.container
  width: 100%
  h1.topTitle
    text-align: center
  .mapTest
    border: 1px solid red
    text-align: left
    #map5
      height: 100%
      width: 100%
</style>